body {
  background-color: #cfcfcf;
}
.searchBox {
  perspective: 750px;
  width: 645px;
  height: 112.5px;
  box-sizing: border-box;
  margin: 200px auto 100px;
  padding: 0 10px;
}
.box3d-01 {
  position: relative;
  left: 20%;
  transform-style: preserve-3d;
  transition: all 0.6s ease-in-out;
}
.box3d-01 .btn {
  position: absolute;
  top: 50%;
  left: 45%;
  width: 72px;
  height: 73px;
  background-color: #3E758E;
  text-align: center;
  line-height: 72px;
  font-size: 37.5px;
  color: #fff;
  transition: all 0.6s ease-in-out;
  cursor: pointer;
}
.box3d-01 .btn:hover {
  background-color: #31505f;
}
.box3d-01 .mid {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 2px;
}
.box3d-01 .mid .search-content {
  position: absolute;
  top: 1px;
  left: 0;
  height: 67px;
  width: 315.15px;
  background-color: rgba(231, 231, 231, 0.699);
  transition: all 0.6s ease-in-out;
}
.box3d-01 .mid .search-content input {
  height: 100%;
  width: 100%;
  background-color: transparent;
  padding: 0 24px;
  outline: none;
  border: none;
  font-size: 24px;
  box-sizing: border-box;
  color: black;
}
.box3d-01 .mid .btn {
  height: 67px;
}
.box3d-01 .front,
.box3d-01 .back,
.box3d-01 .top,
.box3d-01 .bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 315.15px;
  height: 72px;
  background-color: rgba(123, 180, 192, 0.411);
  transition: all 0.6s ease-in-out;
}
.box3d-01 .front,
.box3d-01 .search-cube-front {
  transform: translateZ(37.5px);
}
.box3d-01 .back,
.box3d-01 .search-cube-back {
  transform: translateZ(-37.5px);
}
.box3d-01 .top,
.box3d-01 .search-cube-top {
  transform: translateY(-34.5px) rotateX(90deg);
}
.box3d-01 .bottom,
.box3d-01 .search-cube-bottom {
  transform: translateY(34.5px) rotateX(-90deg);
}
.box3d-01 .search-cube-left {
  transform: translateX(-35.5px) rotateY(-90deg);
}
.box3d-01 .search-cube {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
@keyframes rotating {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}
.box3d-01:hover {
  left: 0;
  transform: rotateY(-20deg) translate3D(-45px, 45px, 0) rotateX(-36deg);
}
.box3d-01:hover .back {
  transform: translateZ(-37.5px);
}
.box3d-01:hover .mid .search-content {
  animation: rotating 2s linear infinite;
  width: 573px;
}
.box3d-01:hover .mid .btn {
  top: 0;
  left: 573px;
  animation: rotating 2s linear infinite;
}
.box3d-01:hover .search-cube .btn {
  top: 0;
  left: 573px;
}
.box3d-01:hover .front,
.box3d-01:hover .back,
.box3d-01:hover .top,
.box3d-01:hover .bottom {
  width: 573px;
}
